<template>
  <div class="content">
    <div class="container">
      <div class="mainform">
        <div class="searchresult">
          <div class="topbar"><i class="el-icon-sort"></i> {{itemtag === ''? '全部':itemtag}}</div>
          <div class="list">
            <li v-for="item in comicsList">
              <div class="item ib">
                <img @click="goLink ('/detail',item)" class="ib" :src="item.cover">
              </div>
              <div class="info ib">
                <p class="title">{{item.name}}</p>
                <p><span>作者：{{item.author}}</span></p>
                <p><span>分类：{{item.tag}}</span></p>
                <p style="height:40px">
                  <span style="overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;">
                    {{item.desc}}
                  </span>
                </p>
                <a @click="goLink ('/detail',item)" class="btn">阅读</a>
              </div>
            </li>
          </div>
          <div class="pager" >
            <div v-show="totalCount===0">暂无数据！</div>
            <el-pagination v-show="totalCount!=0" layout="prev, pager, next" :current-page="currentPage" :total=totalCount @current-change="handleCurrentChange"></el-pagination>
          </div>
        </div>
      </div>
      <div class="ib sidebar">
        <div class="indexform">
          <div class="topbar"><i class="el-icon-menu" style="font-size:24px;margin-right:10px"></i>题材分类</div>
          <div class="list">
            <a @click="changeBgc(index,item)" v-for="(item,index) in list" :class="{'active':itemindex === index}" class="item">{{item.tag}}</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      comicsList:[],
      searchParam:{},
      list: [
        {tag: '全部'},{tag: '搞笑'}, {tag: '奇幻'},{tag: '热血'},{tag: '悬疑'},{tag: '格斗'},{tag: '恐怖'},
        {tag: '科幻'},{tag: '魔幻'},{ tag: '励志'},{tag: '校园'}
      ],
      itemindex: 0,
      itemtag: '',
      totalCount: 0,
      currentPage: 1,
    }
  },
  created(){
    this.getData()
  },
  methods: {
    handleCurrentChange (val) {
      this.searchParam.page = val-1
      this.currentPage = val
      this.getData()
    },
    changeBgc (index,item) {
      this.searchParam.param = item.tag
      if(item.tag === '全部'){
        this.searchParam.param = null
      }
      this.itemindex = index
      this.itemtag = this.list[index].tag
      this.getData()
    },
    getData(){
      var _this = this
      this.$ajax.post('/api/getComics',_this.searchParam).then(function(response){
        _this.comicsList = response.data.data.content
        _this.totalCount = response.data.data.totalElements
        console.log(response.data)
      }).catch(function(error){console.log(error)})
    },
    goLink (path,item) {
      this.$router.push({ 
        path: path,
        query:{cid: item.cid}
      })
    }
  }
}
</script>
<style scoped lang="stylus" rle="stylesheet/stylus">
.container
  width 1200px
  margin 0 auto
  overflow hidden
  position relative
  .mainform
    padding-top 20px
    width 870px
    padding-bottom 20px
    float right
    .searchresult
      padding 0 0 20px 0
      border 1px solid #dedede
      padding-bottom 0
      .topbar
        padding 6px 15px
        font-size 14px
        color #FF3030
      .list
        padding 4px 0 10px 0
        padding-left 20px
        li
          list-style none
          display inline
          .item
            padding 10px 20px 20px 20px
            padding-right 10px
            cursor pointer
            img
              width 150px
              height 200px
              position relative
          .info
            vertical-align top
            padding-left 15px
            height 200px
            position relative
            width 218px
            p
              font-size 12px
              color #a9a9a9
              margin 8px 0
              span
                width: 195px
                display: inline-block
            .title
              font-size 16px
              padding-bottom 5px
              color #000
              margin-top 25px
            .btn
              text-decoration none
              margin 26px 6px
              background #fd113a
              border-radius 3px
              font-size 14px
              color #fff
              height 25px
              line-height 25px
              text-align center
              display inline-block
              padding 0 15px
              cursor pointer
      .pager
        margin 35px
        text-align center
  .ib
    display inline-block
    zoom 1
  .sidebar
    width 308px
    padding-top 20px
    .indexform
      padding 10px
      border 1px solid #dedede
      margin-bottom 20px
      .topbar
        height 55px
        padding-left 15px
        font-size 24px
        line-height 55px
        color #919191
      .list
        margin 10px 5px 5px 10px
        position relative
        a
          text-decoration none
        .item
          font-size: 12px;
          color: #999;
          padding: 2px 5px;
          margin: 5px 0;
          margin-right: 5px;
          display: inline-block;
          zoom: 1;
          cursor pointer
        .active
          background-color #ff5050
          color #fff
</style>
